﻿@{
    ViewBag.Title = "Management";
    Layout = "~/Views/Shared/ListLayout.cshtml";
}
<!--layout-->
<div id="cc" class="easyui-layout" data-options="fit:true,border:true">
    <div data-options="region:'center',title:'模块列表'">
        <table id="tg" class="easyui-treegrid"
               data-options="url:'@Url.Action("GetAllModuleForTreeGrid")',rownumbers: true,idField: 'Id',parentField: 'ParentId',treeField: 'Name',toolbar:'#tb',onClickRow:onClickModuleRow,fitColumns:true,fit:true,border:false">
            <thead>
                <tr>
                    <th data-options="field:'Name',width:80,editor:{type:'validatebox',options:{required:true}}">模块名称</th>
                    <th data-options="field:'URL',width:80,editor:{type:'validatebox',options:{required:true,validType:['length[1,100]']}}">地址</th>
                    <th data-options="field:'Icon',width:80,editor:{type:'lookup',options:{required:true,title:'选择图标',dialog:'#dlgLookup',iconCls:'icon-arrow-search'}}">图标</th>
                    <th data-options="field:'DisplayOrder',width:100,editor:{type:'numberbox',options:{required:true}}">顺序</th>
                </tr>
            </thead>
        </table>
    </div>
    <div data-options="region:'east',title:'功能列表',split:true" style="width:450px">
        <table id="dgAction" class="easyui-datagrid"
               data-options="rownumbers: true,toolbar:'#tbAction',fitColumns:true,fit:true,border:false,onDblClickRow: onDblClickActionRow">
            <thead>
                <tr>
                    <th data-options="field:'Id',checkbox:true"></th>
                    <th data-options="field:'Name',width:80,editor:{type:'validatebox',options:{required:true,tipPosition:'top'}}">功能名称</th>
                    <th data-options="field:'Category',width:80,formatter:formatCategory,editor:{type:'combobox',options:{required:true,tipPosition:'top',valueField: 'value',textField: 'text',
                        data: [{text: '按钮',value: '1'},{text: '代码块',value: '2'}]}}">类型</th>
                    <th data-options="field:'Handle',width:80,editor:{type:'validatebox',options:{required:true,tipPosition:'top'}}">操作</th>
                    <th data-options="field:'Icon',width:80,editor:{type:'lookup',options:{required:true,title:'选择图标',dialog:'#dlgLookup',iconCls:'icon-arrow-search'}}">图标</th>
                    <th data-options="field:'DisplayOrder',width:80,editor:{type:'numberbox',options:{required:true,tipPosition:'top'}}">顺序</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
<!--/layout-->
<!--toolbar-->
<div id="tb" style="padding:5px;height:auto">
    <div class="datagrid-toolbar-toolField">
        <div style="width: 70%; float: left">
            @Html.CodeBlock("AddModule", @<text>
                <a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="onclickAdd()">添加</a>
            </text>)
            @Html.CodeBlock("EditModule", @<text>
                <a href="#" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="edit()">编辑</a>
            </text>)
            @Html.CodeBlock("DeleteModule", @<text>
                <a href="#" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="onclickDelete()">删除</a>
            </text>)
            @Html.CodeBlock("SaveModule", @<text>
                <a href="#" class="easyui-linkbutton" iconcls="icon-save" plain="true" onclick="save()">保存</a>
            </text>)
            @Html.CodeBlock("RejectModule", @<text>
                <a href="#" class="easyui-linkbutton" iconcls="icon-undo" plain="true" onclick="cancel()">放弃</a>
            </text>)
            @Html.CodeBlock("SerachModule", @<text>
                <a href="#" class="easyui-linkbutton" iconcls="icon-search" plain="true" onclick="onclickSearch()">查询</a>
            </text>)
            @*<a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="onclickAdd()">添加</a
                <a href="#" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="edit()">编辑</a>
                <a href="#" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="onclickDelete()">删除</a>
                <span class="separator"></span>
                <a href="#" class="easyui-linkbutton" iconcls="icon-save" plain="true" onclick="save()">保存</a>
                <a href="#" class="easyui-linkbutton" iconcls="icon-undo" plain="true" onclick="cancel()">放弃</a>
                <span class="separator"></span>
                <a href="#" class="easyui-linkbutton" iconcls="icon-search" plain="true" onclick="onclickSearch()">查询</a>>*@
        </div>
        <div style="width: 30%; float: left;text-align:right">
            <a id="btnCollapse" href="#" class="easyui-linkbutton" iconcls="icon-collapse" plain="true"></a>
        </div>
    </div>
    <div id="pnlSearch" class="datagrid-toolbar-searchField">
        模块名称:<input type="text" id="serhName" placeholder="模块名称" />
    </div>
</div>
<div id="tbAction">
    <div class="datagrid-toolbar-toolField">
        <div style="width: 70%; float: left">
            @Html.CodeBlock("AddAction", @<text>
                <a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="appendAction()">添加</a>
            </text>)
            @Html.CodeBlock("DeleteActino", @<text>
                <a href="#" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="deleteAction()">删除</a>
            </text>)
            @Html.CodeBlock("SaveAction", @<text>
                <a href="#" class="easyui-linkbutton" iconcls="icon-save" plain="true" onclick="saveAction()">保存</a>
            </text>)
            @Html.CodeBlock("RejectAction", @<text>
                <a href="#" class="easyui-linkbutton" iconcls="icon-undo" plain="true" onclick="rejectAction()">放弃</a>
            </text>)
            @*<a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="appendAction()">添加</a>
                <a href="#" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="deleteAction()">删除</a>
                <span class="separator"></span>
                <a href="#" class="easyui-linkbutton" iconcls="icon-save" plain="true" onclick="saveAction()">保存</a>
                <a href="#" class="easyui-linkbutton" iconcls="icon-undo" plain="true" onclick="rejectAction()">放弃</a>*@
        </div>
    </div>
</div>
<!--/toolbar-->
@Html.Action("RenderIconLookup", "Common", new { area = "", id = "dlgLookup", filePath = "~/Scripts/jquery-easyui/themes/icon-extension.css" })
@section Script{
    <script>

        var editingId;
        var editActionIndex;
        var action;//0:添加;1:编辑

        $(function () {
            $('#btnCollapse').click(function () {
                $('#pnlSearch').toggle();
                $('#dg').datagrid('resize');
                var $collapse = $(this).find('.l-btn-text span:first');
                if ($collapse.hasClass('icon-collapse')) {
                    $collapse.removeClass('icon-collapse').addClass('icon-expand');
                } else {
                    $collapse.removeClass('icon-expand').addClass('icon-collapse');
                }
            });
        });

        //格式化操作分类
        function formatCategory(value) {
            if (value == '1') {
                return '按钮';
            } else if (value == '2') {
                return '代码块';
            }
            return '';
        }

        function closeDialog() {
            $('#dlgLookup').find('.dialog-value').val('11111');
            $('#dlgLookup').find('.dialog-text').val('22222');
            $('#dlgLookup').dialog('close');
        }

        //点击模块列表行
        function onClickModuleRow(row) {
            var moduleId = row.Id;
            $('#dgAction').datagrid({
                url: '@Url.Action("GetPagedList", "Action")?moduleId=' + moduleId
            });
        }

        //点击添加
        function onclickAdd() {
            var t = $('#tg');

            if (editingId != undefined) {
                t.treegrid('select', editingId);
                return;
            }


            var url = '@Url.Action("GetGuid", "Common", new { area=""})';
            $.get(url, function (data) {
                editingId = data;
                var parentId, fullParentId;
                var node = t.treegrid('getSelected');
                if (!node) {
                    parentId = '@Willow.Const.DataBaseConst.DefaultParentId';
                    fullParentId = editingId;
                } else {
                    parentId = node.Id;
                    fullParentId = node.FullParentId + ',' + editingId;
                }

                t.treegrid('append', {
                    parent: parentId,
                    data: [{
                        Id: editingId,
                        ParentId: parentId,
                        IsDelete: false,
                        FullParentId: fullParentId
                    }]
                });
                t.treegrid('beginEdit', editingId);
                action = 0;
            });
        }

        //编辑
        function edit() {
            if (editingId != undefined) {
                $('#tg').treegrid('select', editingId);
                return;
            }
            var row = $('#tg').treegrid('getSelected');
            if (row) {
                editingId = row.Id
                $('#tg').treegrid('beginEdit', editingId);
                action = 1;
            }
        }

        //保存
        function save() {
            if (editingId == undefined) {
                return false;
            }

            var t = $('#tg');
            var validateResult = t.treegrid('validateRow', editingId);

            if (!validateResult) {
                return false;
            }

            t.treegrid('endEdit', editingId);

            var row = t.treegrid('find', editingId);
            var url = '@Url.Action("Save")';
            var postData = row;
            postData['action'] = action;
            common.post(url, postData, function (result) {
                if (result) {
                    editingId = undefined;
                    action = undefined;
                } else {
                    t.treegrid('beginEdit', editingId);
                }
            });
        }

        //取消
        function cancel() {
            if (editingId != undefined) {
                if (action == 0) {
                    $('#tg').treegrid('remove', editingId);
                } else if (action == 1) {
                    $('#tg').treegrid('cancelEdit', editingId);
                }
                editingId = undefined;
            }
        }

        //点击删除
        function onclickDelete() {
            var t = $('#tg');
            var row = t.treegrid('getSelected');
            if (!row) {
                top.showAlert('请选择模块!', 'warning');
                return false;
            }

            var url = '@Url.Action("Delete")';
            var postData = { id: row.Id };
            common.post(url, postData, function (result) {
                if (result) {
                    t.treegrid('remove', row.Id);
                }
            });
        }

        function onclickSearch() {
            $('#tg').treegrid({
                queryParams: {
                    name: $('#serhName').val()
                }
            });
        }


        //添加功能
        function appendAction() {
            if (endActionEditing()) {
                $('#dgAction').datagrid('appendRow', { Name: '' });
                editActionIndex = $('#dgAction').datagrid('getRows').length - 1;
                $('#dgAction').datagrid('selectRow', editActionIndex)
                        .datagrid('beginEdit', editActionIndex);
            }
        }

        //取消
        function rejectAction() {
            $('#dgAction').datagrid('rejectChanges');
            editActionIndex = undefined;
        }

        //结束编辑
        function endActionEditing() {
            if (editActionIndex == undefined) { return true; }
            var $dg = $('#dgAction');
            if ($dg.datagrid('validateRow', editActionIndex)) {
                $dg.datagrid('endEdit', editActionIndex);
                editActionIndex = undefined;
                return true;
            } else {
                return false;
            }
        }

        //双击行
        function onDblClickActionRow(index) {
            if (editActionIndex != index) {
                if (endActionEditing()) {
                    $('#dgAction').datagrid('selectRow', index)
                            .datagrid('beginEdit', index);
                    editActionIndex = index;
                } else {
                    $('#dgAction').datagrid('selectRow', editActionIndex);
                }
            }
        }

        //删除功能
        function deleteAction() {

            var $dg = $('#dgAction');

            var checkedRow = $dg.datagrid('getChecked');
            if (checkedRow.length == 0) {
                top.showAlert('请选择功能!', 'warning');
                return false;
            }

            for (var i = 0; i < checkedRow.length; i++) {
                var rowIndex = $dg.datagrid('getRowIndex', checkedRow[i]);
                if (editActionIndex == rowIndex) {
                    $dg.datagrid('cancelEdit', rowIndex)
                }
                $dg.datagrid('deleteRow', rowIndex);
            }
        }

        //保存功能
        function saveAction() {

            var $dg = $("#dgAction");

            if (!endActionEditing()) { return false; }

            if ($dg.datagrid('getChanges').length == 0) { return false; }

            var inserted = $dg.datagrid('getChanges', 'inserted');
            var deleted = $dg.datagrid('getChanges', 'deleted');
            var updated = $dg.datagrid('getChanges', 'updated');
            var selectedModule = $("#tg").treegrid('getSelected');
            if (!selectedModule) {
                top.showAlert('请选择模块!', 'warning');
                return false;
            }
            var filterDeleted = [];
            for (var i = 0; i < deleted.length; i++) {
                if (deleted[i].Id) {
                    filterDeleted.push(deleted[i]);
                }
            }

            var url = '@Url.Action("Submit","Action")';
            var postData = {
                lstInsert: inserted,
                lstDelete: filterDeleted,
                lstUpdate: updated,
                moduleId: selectedModule.Id
            };

            common.post(url, postData, function (result) {
                if (result) {
                    $dg.datagrid('acceptChanges');
                }
            });
        }

    </script>
}
